<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>艾滋信息</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="element.css">
</head>
<body style="width: 1920px; height: 1080px">
<div id="app" style="width: 80%; margin: 0 auto">
    <h2>艾滋人员信息表</h2>

    <el-row>
        <el-col :span="6" style="margin-bottom: 10px">
            <el-input v-model="name" style="width: 70%" @keyup.enter.native="loadTable(1)"></el-input>
            <el-button type="primary" @click="add">新增</el-button>
            <el-button type="primary"  @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger"   @click="onMultipleDel()">删除</el-button>


        </el-col>
    </el-row>

    <el-table
            :data="page.content"
            stripe
            border
            style="width: 100%"
            :row-class-name="rowClassName"
            @selection-change="handleSelectionChange">
        <el-table-column

                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="name"
                label="用户名"
        >
        </el-table-column>
        <el-table-column
                prop="idnumber"
                label="身份证号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="gender"
                label="性别">
        </el-table-column>
        <el-table-column
                prop="contactphone"
                label="手机号">
        </el-table-column>
        <el-table-column
                prop="infectionroute"
                label="感染途径">
        </el-table-column>
        <el-table-column
                prop="hasCriminalhistory"
                label="是否有犯罪史">
        </el-table-column>
        <el-table-column
                prop="illegalactivities"
                label="违法犯罪情况">
        </el-table-column>
        <el-table-column
                prop="casecategory"
                label="案件类别">
        </el-table-column>
        <el-table-column
                prop="attentiontype"
                label="关注类型">
        </el-table-column>
        <el-table-column
                prop="assistancestatus"
                label="帮扶情况">
        </el-table-column>
        <el-table-column
                prop="assistantname"
                label="帮扶人姓名">
        </el-table-column>
        <el-table-column
                prop="assistantphone"
                label="帮扶人电话">
        </el-table-column>
        <el-table-column
                prop="treatmentstatus"
                label="收治情况">
        </el-table-column>
        <el-table-column
                prop="treatmentinstitutionname"
                label="收治机构名称">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button type="primary"  @click="edit(scope.row)">编辑</el-button>
                <el-button type="primary"   @click="del(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-row type="flex" justify="center" style="margin-top: 10px">
        <el-pagination
                layout="prev, pager, next"
                :page-size="pageSize"
                :current-page="pageNum"
                @prev-click="loadTable"
                @current-change="loadTable"
                @next-click="loadTable"
                :total="page.totalElements">
        </el-pagination>
    </el-row>

    <el-dialog
            title="用户信息"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="form.idnumber"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-select v-model="form.gender" placeholder="请选择性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input v-model="form.contactphone"></el-input>
            </el-form-item>
            <el-form-item label="感染途径">
                <el-select v-model="form.infectionroute" placeholder="请选择活动区域">
                    <el-option label="异性性传播" value="异性性传播"></el-option>
                    <el-option label="同性性传播" value="同性性传播"></el-option>
                    <el-option label="注射毒品传播" value="注射毒品传播"></el-option>
                    <el-option label="母婴传播" value="母婴传播"></el-option>
                    <el-option label="输血以及使用血制品传播" value="输血以及使用血制品传播"></el-option>
                    <el-option label="性接触加注射毒品传播" value="性接触加注射毒品传播"></el-option>
                    <el-option label="既往采血浆传播" value="既往采血浆传播"></el-option>
                    <el-option label="不详" value="不详"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否有犯罪史">
                <el-input v-model="form.hascriminalhistory"></el-input>
            </el-form-item>
            <el-form-item label="违法犯罪情况">
                <el-input v-model="form.illegalactivities"></el-input>
            </el-form-item>
            <el-form-item label="案件类型">
                <el-input v-model="form.casecategory"></el-input>
            </el-form-item>
            <el-form-item label="关注类别">
                <el-select v-model="form.attentiontype" placeholder="请选择活动区域">
                    <el-option label="无" value="无"></el-option>
                    <el-option label="故意传播" value="故意传播"></el-option>
                    <el-option label="造谣传谣" value="造谣传谣"></el-option>
                    <el-option label="恐吓" value="恐吓"></el-option>
                    <el-option label="聚众上访" value="聚众上访"></el-option>
                    <el-option label="非正当防卫" value="非正当防卫"></el-option>
                    <el-option label="非正常上访" value="非正常上访"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="帮扶情况">
                <el-input v-model="form.assistancestatus"></el-input>
            </el-form-item>
            <el-form-item label="帮扶人姓名">
                <el-input v-model="form.assistantname"></el-input>
            </el-form-item>
            <el-form-item label="帮扶人电话">
                <el-input v-model="form.assistantphone"></el-input>
            </el-form-item>
            <el-form-item label="收治情况">
                <el-select v-model="form.treatmentstatus" placeholder="请选择活动区域">
                    <el-option label="无" value="无"></el-option>
                    <el-option label="羁押" value="羁押"></el-option>
                    <el-option label="抗病毒治疗" value="抗病毒治疗"></el-option>
                    <el-option label="戒毒药物维持治疗" value="戒毒药物维持治疗"></el-option>
                    <el-option label="其他" value="其他"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="收治机构名称">
                <el-input v-model="form.treatmentinstitutionname"></el-input>
            </el-form-item>





        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </span>
    </el-dialog>

</div>

<script src="jquery.min.js"></script>
<script src="vue.js"></script>
<!-- 引入组件库 -->
<script src="element.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            page: {},
            name: '',
            pageNum: 1,
            pageSize: 8,
            dialogVisible: false,
            form: {},
            multipleSelection: [],
            multipleSelectAry: []

        },
        created() {
            this.loadTable(this.pageNum);
        },
        methods: {

            rowClassName(row, index) {
                row.row.index = row.rowIndex;
            },
            handleSelectionChange(rows) {
                this.multipleSelection = rows;
                rows.forEach((item) => {
                    this.multipleSelectAry.push(item.index);
                });
            },
            onMultipleDel() {
                if (this.multipleSelectAry.length === 0) {
                    this.$message.error("请选择要删除的数据");
                }
                this.tableData = this.tableData.filter((item, index) => {
                    return !this.multipleSelectAry.includes(index);
                });
            },

            loadTable(num) {
                this.pageNum = num;
                $.get("/hiv/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&name=" + this.name).then(res => {
                    this.page = res.data;
                });
            },
            add() {
                this.dialogVisible = true;
                this.form = {};
            },
            edit(row) {
                this.form = row;
                this.dialogVisible = true;
            },
            save() {
                let data = JSON.stringify(this.form);
                if (this.form.id) {
                    // 编辑
                    $.ajax({
                        url: '/hiv',
                        type: 'put',
                        contentType: 'application/json',
                        data: data
                    }).then(res => {
                        this.dialogVisible = false;
                        this.loadTable(1);
                    })
                } else {
                    // 新增
                    $.ajax({
                        url: '/hiv',
                        type: 'post',
                        contentType: 'application/json',
                        data: data
                    }).then(res => {
                        this.dialogVisible = false;
                        this.loadTable(1);
                    })
                }
            },
            del(id) {
                $.ajax({
                    url: '/hiv/' + id,
                    type: 'delete',
                    contentType: 'application/json'
                }).then(res => {
                    this.loadTable(1);
                })
            }
        }

    })
</script>
</body>
</html>
